<template>
	<div name="slide-fade" class="main-1">
		<div class="tool-bar" @click="handleClose">
			<div style="display: flex;align-items: center;justify-content: center;">🔽</div>
		</div>
		<div class="list" :class="len > 0 ? 'next' : ''">
			<div class="item" v-for="(item, key) in textList" :key="key" @click="handlerInput(item)">
				<div v-if="item !== 'delete'">{{ item }}</div>
				<div class="icon" v-else></div>
			</div>
			<!-- <div class="delete" @click="handlerDelete"><div class="icon"></div></div> -->
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			textList: [],
			templateTextList1: [
				'京',
				'津',
				'冀',
				'晋',
				'蒙',
				'辽',
				'吉',
				'黑',
				'沪',
				'苏',
				'浙',
				'皖',
				'闽',
				'赣',
				'鲁',
				'豫',
				'鄂',
				'湘',
				'桂',
				'琼',
				'渝',
				'川',
				'贵',
				'云',
				'藏',
				'陜',
				'甘',
				'青',
				'宁',
				'新',
				'粤',
				'delete'
			],
			templateTextList2: [
				'1',
				'2',
				'3',
				'4',
				'5',
				'6',
				'7',
				'8',
				'9',
				'0',
				'Q',
				'W',
				'E',
				'R',
				'T',
				'Y',
				'U',
				'I',
				'O',
				'P',
				'A',
				'S',
				'D',
				'F',
				'G',
				'H',
				'J',
				'K',
				'L',
				'Z',
				'X',
				'C',
				'V',
				'B',
				'N',
				'M',
				'港',
				'澳',
				'学',
				'delete'
			]
		};
	},
	props: {
		textLength: {
			type: Number,
			default: () => {
				return 7;
			}
		},
		len: {
			type: Number,
			default: () => {
				return 0;
			}
		}
	},
	methods: {
		handlerInput(item) {
			if (item === 'delete') {
				this.handlerDelete();
			} else {
				if (this.len < this.textLength) {
					this.$emit('input', item);
				}
			}
		},
		handleClose() {
			this.$emit('close', 1)
		},
		setTextList() {
			if (this.len > 0) {
				this.textList = this.templateTextList2;
			} else if (this.len === 0) {
				this.textList = this.templateTextList1;
			}
		},
		handlerDelete() {
			if (this.len > 0) {
				this.$emit('delete', true);
			}
		}
	},
	created() {
		this.setTextList();
	},
	watch: {
		len(val) {
			this.setTextList();
		}
	}
};
</script>

<style scoped lang="scss">
.tool-bar {
	width: 100%;
	height: 60upx;
	box-sizing: border-box;
	padding: 0 20upx;
	background: rgb(239, 241, 246);
	display: flex;
	justify-content: center;
	align-items: center;
	div {
		width: 30upx;
		height: 30upx;
		.test {
			display: block;
			width: 30upx;
			height: 30upx;
		}
	}
}
.main-1 {
	width: 100%;
	background: #f6f6f6;
	position: fixed;
	bottom: 0;
	left: 0;
	// height: 420rpx;
	// height: 500upx;
	animation: mymove 0.5s 1;
	.list {
		width: 100%;
		height: 420upx;
		box-sizing: border-box;
		padding: 30upx 6.5upx 10upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 0;
		height: 100%;
		position: relative;
		.item {
			width: 70upx;
			height: 70upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			line-height: 1;
			color: #000;
			background: #fff;
			margin: 0 8.5upx 8upx;
			border-radius: 2px;
			border: 1upx solid #000;
			&:active {
				background: #4ac8ff;
				color: #fff;
				border: 1upx solid #4ac8ff;
			}
			.icon {
				background: url('../static/icon/delete.png') no-repeat center center;
				background-size: 70% 70%;
				width: 100%;
				height: 100%;
				&:active {
					background: url('../static/icon/delete_on.png') no-repeat center center;
					background-size: 70% 70%;
				}
			}
		}
		.delete.item {
			position: absolute;
			right: 35.5upx;
			bottom: 30upx;
			width: 55upx;
			height: 55upx;
			border-radius: 2px;
			background: #fff;
			.icon {
				background: url('../static/icon/delete.png') no-repeat center center;
				background-size: 70% 70%;
				width: 100%;
				height: 100%;
				&:active {
					background: url('../static/icon/delete_on.png') no-repeat center center;
					background-size: 70% 70%;
				}
			}
			&:active {
				background: #4ac8ff;
			}
		}
	}
	.next {
		padding: 30upx 0upx 10upx;
		.item {
			width: 60upx;
			margin: 0 5upx 8upx;
		}
		.delete {
			right: 20upx;
		}
	}
}

@keyframes mymove {
	0% {
		bottom: -100%;
	}
	100% {
		bottom: 0;
	}
}
</style>
